//该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
import Router1 from '../components/router1'
import Router2 from '../components/router2'
// import Router2A from '../components/router2A'
import Router2B from '../components/router2B'

//创建并暴露一个路由器
const router = new VueRouter({
    // mode: 'history', //开启浏览器history模式
    routes: [
        { 
            name: 'router1',
            path: '/router1', 
            component: Router1,
            meta: {
                isAuth: true
            },
            // 独立路由守卫，只考虑自己
            beforeEnter: (to, from, next) => {
                console.log('router1路由独享守卫---beforeEnter', to, from);
                next()
            }
        },
        {
            path: '/router2', 
            component: Router2,
            // 独立路由守卫，只考虑自己
            beforeEnter: (to, from, next) => {
                console.log('router2路由独享守卫---beforeEnter', to, from);
                next()
            },
            children: [
                {
                    path: 'router2A',
                    // path: 'router2A/:id/:title', // params传参的写法
                    component: () => import('../components/router2A'), //在首页中使用路由懒加载技术可以提升速度
                    //props的第三种写法，值为函数
                    // props({query}) {
                    //     return {id: query.id, title: query.title}
                    // }
                },
                {   
                    name: 'router2B',
                    path: 'router2B', 
                    component: Router2B,
                }
            ]
        },
    ]
})

//全局前置路由守卫，符合条件再跳转（next方法），每次切换路由之前被调用
router.beforeEach((to,from,next) => {
    console.log('全局前置路由守卫---beforeEach', to, from);
    next()
    // 方式1：
    // if(to.path) {
    //     next()
    // }
    // 方式2：判断是否需要加权限
    // if(to.meta.isAuth) {
    //     next()
    // }
})

//全局解析守卫：在组件守卫之后，导航确认之前
router.beforeResolve((to, from, next) => {
    console.log('全局解析守卫 beforeResolve', to, from);
    next();
});

//全局后置路由守卫，符合条件再跳转（next方法），每次切换路由之后被调用
router.afterEach((to,from) => {
    console.log('全局后置路由守卫---afterEach', to, from);
    //用的不多，没有next参数
})

export default router
